<template>
    <div v-loading="loading" class="register_step1">
        <div class="top">
            {{ workData.baseMap?.hosname }} | {{ workData.baseMap?.bigname }} · {{ workData.baseMap?.depname }}
        </div>
        <div class="center">
            <h2>{{ workData.baseMap?.workDateString }}</h2>
            <div class="content">
                <div @click="changeTime(item)"
                    :class="{ cur: item.workDate === workTime.workDate, active: item.status == -1 || item.availableNumber == -1 }"
                    class="item" v-for="(item, index) in workData.bookingScheduleList" :key="index">
                    <div class="center_top">{{ item.workDate }} {{ item.dayOfWeek }}</div>
                    <div v-show="item.status == -1" class="bottom">停止挂号</div>
                    <div v-show="item.status == 0" class="bottom">
                        {{ item.availableNumber == -1 ? '约满了' : `有号(${item.availableNumber})` }}
                    </div>
                    <div v-show="item.status == 1" class="bottom">
                        即将放号
                    </div>
                </div>
            </div>
            <div class="register_step1-pagination">
                <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" @current-change="fetchWorkData"
                    layout="prev, pager, next" :total="total" />
            </div>
        </div>
        <!-- 底部展示医生的结构 -->
        <div class="bottom">
            <div class="will" v-if="workTime.status == 1">
                <span>2023年6月3日放号</span>
            </div>
            <div class="doctor" v-else>
                <div class="moring">
                    <div class="tip">
                        <el-icon color="#55a6fe">
                            <Sunny />
                        </el-icon>
                        <span>上午号源</span>
                    </div>
                    <!-- 每一个医生的信息 -->
                    <div class="doc_info" v-for="item in morningArr" :key="item.id">
                        <div class="left">
                            <div>{{ item.title }} | {{ item.docname }}</div>
                            <div>{{ item.skill }}</div>
                        </div>
                        <div class="right">
                            <span>￥{{ item.amount }}</span>
                            <el-button @click="goStep(item)" type="primary" size="small">{{ item.availableNumber }}
                                (号)
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="after">
                    <div class="tip">
                        <el-icon color="#55a6fe">
                            <Sunrise />
                        </el-icon>
                        <span>上午号源</span>
                    </div>
                    <!-- 每一个医生的信息 -->
                    <div class="doc_info" v-for="item in afterArr" :key="item.id">
                        <div class="left">
                            <div>{{ item.title }} | {{ item.docname }}</div>
                            <div>{{ item.skill }}</div>
                        </div>
                        <div class="right">
                            <span>￥{{ item.amount }}</span>
                            <el-button @click="goStep(item)" type="primary" size="small">{{ item.availableNumber }}
                                (号)
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { Sunny, Sunrise } from '@element-plus/icons-vue';
import { reqHospitalWork, reqHospitalDoctor } from '@/api/hospital';
import type { Doctor, DocArr, DoctorResponseData, HospitalWordData } from '@/api/hospital/type';
import { useRoute, useRouter } from 'vue-router';
import debounce from '@/utils/debounce';
let $route = useRoute();
let $router = useRouter();
let pageNo = ref<number>(1);
let limit = ref<number>(0);
let total = ref<number>(0);
let loading = ref<boolean>(false);
// 存储排班日期:当前数据的第一个
let workTime = ref<any>({});
// 存储排班医生的数据
let docArr = ref<DocArr>([]);
// 存储医院科室挂号的数据
let workData = ref<any>({});
onMounted(() => {
    hasWorkData();
});

// 获取挂号的数据
const fetchWorkData = async () => {
    loading.value = await true
    let { code, data }: HospitalWordData = await reqHospitalWork(pageNo.value, limit.value, $route.query.hoscode as string, $route.query.depcode as string);
    if (code === 200) {
        total.value = data.total;
        workData.value = data;
        // 存储第一天日期的数据
        workTime.value = workData.value.bookingScheduleList[0];
        // 获取一次医生的数据
        getDoctorWorkData();
    }
    loading.value = await false
};

// 获取某一天医生排班的数据
const getDoctorWorkData = async () => {
    loading.value = await true
    //医院的编号
    let hoscode: string = $route.query.hoscode as string;
    //科室的编号
    let depcode: string = $route.query.depcode as string;
    //时间
    let workDate: string = workTime.value.workDate;
    let { code, data }: DoctorResponseData = await reqHospitalDoctor(hoscode, depcode, workDate)
    if (code === 200) {
        docArr.value = data
    }
    loading.value = await false
};

// 点击顶部某一天的时候触发回调
const changeTime = debounce((item: any) => {
    workTime.value = item;
    getDoctorWorkData()
}, 200);

// 计算出上午排班医生数据
let morningArr = computed(() => {
    return docArr.value.filter((item: Doctor) => {
        return item.workTime == 0
    })
});

// 计算出下午排班医生数据
let afterArr = computed(() => {
    return docArr.value.filter((item: Doctor) => {
        return item.workTime == 1
    })
});

// 路由跳转进入到选择就诊人页面
const goStep = (doctor: Doctor) => {
    $router.push({
        path: '/hospital/register_step2',
        query: { docId: doctor.id }
    });
};

const hasWorkData = () => {
    if (window.innerWidth <= 768) {
        if (limit.value !== 3) {
            fetchWorkData();
            pageNo.value = 1
            limit.value = 3
        }
    } else {
        if (limit.value !== 5) {
            fetchWorkData();
            pageNo.value = 1
            limit.value = 5
        }
    }
};

// onresize 监听视口变化
window.addEventListener('resize', debounce(() => {
    hasWorkData()
}, 200));
</script>
<style scoped lang="scss">
.register_step1 {
    .top {
        font-size: 18px;
        color: #7f7f7f7f;
    }

    .center {
        margin: 16px 0;
        text-align: center;

        h2 {
            margin-bottom: 16px;
            font-weight: 700;
        }

        .content {
            display: flex;
            justify-content: space-around;
            margin-bottom: 16px;

            .item {
                border: 2px solid lightblue;
                margin: 0 6px;
                width: 20%;
                height: 100px;
                cursor: pointer;

                .center_top {
                    padding: 0 10px;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 40%;
                    background-color: lightblue;
                }

                .bottom {
                    height: 60%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }

    .bottom {
        .will {
            font-size: 20px;
            text-align: center;
            margin-bottom: 10px;
            color: lightcoral;
        }

        .moring,
        .after {
            .tip {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                span {
                    margin-left: 4px;
                }
            }

            .doc_info {
                display: flex;
                justify-content: space-between;
                margin: 10px 0;
                padding: 6px;
                border-bottom: 1px solid #55a6fe;

                .left {
                    div:nth-child(1) {
                        color: #55a6fe;
                        margin-bottom: 6px;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;

                    span {
                        color: lightcoral;
                        margin-right: 32px;
                    }
                }
            }
        }
    }

    .register_step1-pagination {
        .el-pagination {
            justify-content: center;
        }
    }
}

@media (max-width:1280px) {
    .register_step1 {
        .top {
            font-size: 16px;
            text-align: center;
        }

        .center {
            h2 {
                font-size: 14px;
            }

            .content {
                .item {
                    width: 33%;
                    margin: 0 2px;

                    .center_top {
                        font-size: 12px;
                        padding: 0 4px;
                    }

                    .bottom {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

@media (max-width:1280px) {
    .register_step1 {
        .bottom {
            .will {
                font-size: 18px;
            }

            .moring,
            .after {
                .tip {
                    font-size: 14px;
                }

                .doc_info {
                    .left {
                        font-size: 12px;
                    }

                    .right {
                        span {
                            font-size: 12px;
                            margin-right: 12px;
                        }
                    }
                }
            }
        }
    }
}

.active {
    border: 2px solid rgb(205, 205, 205) !important;

    .center_top {
        background-color: rgb(205, 205, 205) !important;
    }
}

.cur {
    transition: all 1s;
    border: 2px solid lightcoral !important;

    .center_top {
        transition: all 1s;
        color: white;
        background-color: lightcoral !important;
    }
}
</style>